import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Toast, NavBar, Card } from 'react-vant';
import { Arrow, Like } from '@react-vant/icons'
import { createFromIconfontCN } from '@react-vant/icons'

const IconFont = createFromIconfontCN(
    '//at.alicdn.com/t/c/font_3954496_15xo3a19yc3.js'
)


export default function Courier() {
    const navigate = useNavigate()
    const state = useLocation()
    console.log(state);
    // const { clist, shopData } = state.state
    // console.log(clist);
    const a = {
        width: '90%',
        margin: '0 auto',
        height: "100px",
        boxShadow: "0 0 10px #C1C1C1",
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-around',
        marginBottom: 20,
        marginTop: 10

    }
    const [list] = useState([
        { id: 1, name: '打包带走', xx: '自取带走，提前为你放进打包盒', icon: 'icon-waidai' },
        { id: 2, name: '堂食', xx: '到店自取食堂', icon: 'icon-tangshi-' },
        { id: 3, name: '骑手送餐', xx: '准备您外卖后，由骑手配送上门', icon: 'icon-waimai' },
    ])

    return (
        <div className='courier'>
            <div className="pre">
                <NavBar
                    title="配送方式"
                    leftText="返回"
                    onClickLeft={() => navigate(-1)}
                    onClickRight={() => Toast('按钮')}
                />
            </div>
            <div className="ne" style={{ padding: '20px' }}>
                <br />
                <br />
                <h2>配送方式</h2>
                <p style={{ color: '#C1C1C1', marginTop: '10px' }}>请选择订单收获方式，我们将为您提前准备</p>

            </div>
            <div className="card">
                {
                    list.map(item => {
                        return <Card round style={a} border={true} key={item.id}
                            onClick={() => {
                                navigate('/user/db', {
                                    state: {
                                        item,
                                        state: state.state
                                    }

                                });
                            }}>
                            <div>
                                <IconFont style={{ fontSize: '40px' }} name={item.icon} />
                            </div>
                            <div style={{ width: '200px' }}>
                                <h3>{item.name}</h3>
                                <p style={{ color: '#C1C1C1', marginTop: '10px', fontSize: '12px' }}>{item.xx}</p>
                            </div>
                            <div>   <Arrow style={{ fontSize: '20px' }} /></div>
                        </Card>
                    })
                }
            </div>
        </div>
    )
}

